<template>
  <div ref="chart_map" class="chart_map"></div>
</template>
<script>
import echarts from "echarts";
import { mapGetters } from "vuex";

/**
 * @param {Object} options echarts 配置项
 */
export default {
  props: {
    options: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    };
  },
  computed: {
    ...mapGetters(["sidebar"])
  },
  watch: {
    options(options) {
      this.init(options);
    },
    "sidebar.opened": {
      handler() {
        setTimeout(() => {
          this.chart.resize();
        }, 300)
      },
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init(this.options);
      window.addEventListener(
        "resize",
        () => {
          this.chart.resize();
        },
        false
      );
    });
  },
  methods: {
    init(options) {
      this.chart = echarts.init(this.$refs.chart_map, "echartsTheme");
      this.chart.setOption(options);
    }
  }
};
</script>
